<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="HandheldFriendly" content="true"/>
<link href="../css/mui.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css"/>
</head>
<body>

<!-- CONTENT -->
<div class="mui-content">
	<!-- 顶部填充背景 -->
	<div style="background-color: #EC971F;height: 260px;width: 100%;" id="bck">
		<p style="color: white;padding: 70px 0 0 10px;font-size: 15px;font-weight: 600;">订单配送至</p>
		<div>
			<a id="address">
			<p style="color: white;padding: 0 0 0 10px;font-size: 30px;width: 86%;line-height: 120%;">
				河北民族师范学院实训楼A110
			</p>
			</a>
		</div>
	</div>
	
	<div class="mui-card" style="margin-top: -63px;">
		<ul class="mui-table-view">
			<li class="mui-table-view-cell mui-collapse">
				<a class="mui-navigate-right" href="#">
					<div style="margin: 10px 0;">
						<span>送达时间</span><span id="result" style="float: right;margin-right: 6%;">尽快送达(11:30)</span>
					</div>
				</a>
				<div class="mui-collapse-content">
					<button id='demo1' data-options='{"beginYear":2018,"endYear":2018}' class="btn mui-btn mui-btn-block">选择日期时间 ...</button>
				</div>
			</li>
			<li class="mui-table-view-cell mui-collapse">
				<a class="mui-navigate-right" href="#">
					<div style="margin: 10px 0;">
						<span>支付方式</span><span id="payText" style="float: right;margin-right: 6%;">支付宝</span>
					</div>
				</a>
				<div class="mui-collapse-content">
					<form class="mui-input-group">
						<div class="mui-input-row mui-radio">
							<label>支付宝支付</label>
							<input class="payRad" value="支付宝支付" name="radio1" type="radio">
						</div>
						<div class="mui-input-row mui-radio">
							<label>微信支付</label>
							<input class="payRad" value="微信支付" name="radio1" type="radio">
						</div>
					</form>
				</div>
			</li>
		</ul>
	</div>
	<div class="mui-card">
		<div class="mui-card-header">
			<div id="resName">芝佳基汉堡店</div>
			<button style="float: right;" type="button" class="mui-btn mui-btn-warning mui-btn-console.logd">
				再来一单
			</button>
		</div>
		<div class="mui-card-content">
			<div class="mui-card-content-inner">
				<img id="orImg" class="mui-pull-left" width="50px" src="../images/restaurant/jituifan.jpg">
				<div>
					<div style="font-size: 18px;float: right;">￥12</div>
					<div id="orderCont" style="font-size:15px;color: black;width:250px;">鱼香脆皮鸡肉饭（小份）</div>
				</div>
			</div>
			<div style="margin: 10px 0;" class="mui-card-content-inner">
				<img id="orImg" class="mui-pull-left" width="50px" src="../images/restaurant/shangxiaojikuai.jpg">
				<div>
					<div style="font-size: 18px;float: right;">￥5</div>
					<div id="orderCont" style="font-size:15px;color: black;width:250px;">上校鸡块</div>
				</div>
				<div id="" style="margin-top: 40px;">
					<div style="font-size: 18px;float: right;">￥1</div>
					<div style="font-size:15px;color: black;width:250px;">
						<span class="mui-badge mui-badge-warning">配送费</span>
						商家配送
					</div>
				</div>
			</div>
		</div>
		<div class="mui-card-footer">
			<span class="mui-icon mui-icon-phone" style="font-size: 15px;color: #EC971F;">联系商家</span>
			<span id="total" style="font-size: 17px;color: red;font-weight: 600;" value="18">实付  ￥18</span>
		</div>
	</div>
	
	<div class="mui-card">
		<div class="mui-card-content mui-navigate-right">
			<div class="mui-table-view-cell">
				<a id="orderTips" href="javascript:;">
					<div style="margin: 10px 0;">
						<span>订单备注</span><span style="float: right;margin-right: 6%;color: ;">口味、偏好</span>
					</div>
				</a>
			</div>
		</div>
	</div>
	
	<div id="dcontent" style="margin: 30px 10px;">
		<button type="button" class="mui-btn mui-btn-warning mui-btn-block">确认支付
		<span class="mui-badge mui-badge-warning" style="font-size: 20px;">￥18</span></button>
	</div>
	
	
	
</div>




<script src="../js/immersed.js"></script>
<script src="../js/common.js"></script>
<script src="../js/mui.js"></script>
<script src="../js/mui.picker.min.js"></script>
<script type="text/javascript">
//订单信息
// mui.plusReady(function(){
// 	var currentWeb=plus.webview.currentWebview();
// 	//var bodyTitle = document.getElementsByClassName("mui-title")[0];
// 	var resName = document.getElementById("resName");
// 	var orImg = document.getElementById("orImg");
// 	var orderCont = document.getElementById("orderCont");
// 	//bodyTitle.innerHTML = currentWeb.title;
// 	resName.innerText = currentWeb.resName;
// 	orderCont.innerText = currentWeb.orderCont;
// 	orImg.src=currentWeb.orImg;
// })


function clickButton(){
	plus.nativeUI.alert('clicked!');
}

//申请理赔
document.getElementById("orderTips").addEventListener("tap",function(){
	mui.openWindow({
		url:"order_tips.html",
		id:"order_tips.html",
		show:{
			autoShow:true,
			aniShow:"slide-in-right",//页面显示动画，默认为”slide-in-right“；
			duration:200,//页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
		},
		styles:{
			titleNView: {
				//type:'transparent',//透明渐变样式
				titleText: '订单备注',
				titleColor:'white',
				backgroundColor: '#EC971F',
				autoBackButton:true,
			},
		},
		waiting:{
			autoShow:false,//自动显示等待框，默认为true
			title:'正在加载...',//等待对话框上显示的提示内容
		},
		extras:{
		},
		});
})	

//地址
//申请理赔
document.getElementById("address").addEventListener("tap",function(){
	mui.openWindow({
		url:"address_list.html",
		id:"address_list.html",
		show:{
			autoShow:true,
			aniShow:"slide-in-right",//页面显示动画，默认为”slide-in-right“；
			duration:200,//页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
		},
		styles:{
			titleNView: {
				//type:'transparent',//透明渐变样式
				titleText: '收货地址',
				titleColor:'black',
				backgroundColor: 'white',
				autoBackButton:true,
			},
		},
		waiting:{
			autoShow:false,//自动显示等待框，默认为true
			title:'正在加载...',//等待对话框上显示的提示内容
		},
		extras:{
		},
	});
});

(function($) {
$.init();
var result = $('#result')[0];
var btns = $('.btn');
btns.each(function(i, btn) {
	btn.addEventListener('tap', function() {
		var _self = this;
		if(_self.picker) {
			_self.picker.show(function (rs) {
				result.innerText = rs.text;
				_self.picker.dispose();
				_self.picker = null;
			});
		} else {
			var optionsJson = this.getAttribute('data-options') || '{}';
			var options = JSON.parse(optionsJson);
			var id = this.getAttribute('id');
			
			/*
			 * 首次显示时实例化组件
			 * 示例为了简洁，将 options 放在了按钮的 dom 上
			 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
			 */
			_self.picker = new $.DtPicker(options);
			_self.picker.show(function(rs) {
				/*
				 * rs.value 拼合后的 value
				 * rs.text 拼合后的 text
				 * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
				 * rs.m 月，用法同年
				 * rs.d 日，用法同年
				 * rs.h 时，用法同年
				 * rs.i 分（minutes 的第二个字母），用法同年
				 */
				result.innerText = rs.text;
				/* 
				 * 返回 false 可以阻止选择框的关闭
				 * return false;
				 */
				/*
				 * 释放组件资源，释放后将将不能再操作组件
				 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
				 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
				 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
				 */
				_self.picker.dispose();
				_self.picker = null;
			});
		}
		
	}, false);
});

})(mui);



//支付方式
mui(".mui-input-group").on("tap","input",function(){
	var text = this.getAttribute("value");
	var payText = document.getElementById("payText");
	payText.innerText = text;
})
</script>
</body>

</html>
